<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, watch } from "vue";
import {getDeclaration, getDeclarationOut} from "@/services/newsApi.ts";
import type { FormRule } from "@/types/commonType.ts";
import { FormInstance, Message } from "@arco-design/web-vue";
import useFormSubmit from "@/hooks/useFormSubmit.ts";
import type { newsHelpEditType } from "@/types/newsType";

const props = defineProps({
  registUid: String,
  show: Number,
  link: String
});
const projectInfo = reactive<{
  id: string,
  projectBackground: string, //项目背景
  applicationScenario: null | string, //应用场景
  coreAdvantages: null | string, //核心优势
  fundamentalsDataElements: null | string, //数据要素基础
  technicalArchitecture: null | string, //技术路线
  dataGovernance: null | string, //数据治理情况
  mechanismInnovation: null | string, //机制创新与模式创新
  securityManagement: null | string, //安全保障
  applicationEffectiveness: null | string, //应用成效
  businessModel: null | string, //商业模式描述
  registUid: null | string, //报名用户id
  createTime: null | string,
  updateTime: null | string,
}>({
  id: "",
  projectBackground: "", //项目背景
  applicationScenario: null, //应用场景
  coreAdvantages: null, //核心优势
  fundamentalsDataElements: null, //数据要素基础
  technicalArchitecture: null, //技术路线
  dataGovernance: null, //数据治理情况
  mechanismInnovation: null, //机制创新与模式创新
  securityManagement: null, //安全保障
  applicationEffectiveness: null, //应用成效
  businessModel: null, //商业模式描述
  registUid: "", //报名用户id
  createTime: null,
  updateTime: null,
});

const getDeclarationList = () => {
  console.log(props.registUid === "1951177067077316609");
  if (props.link === "out") {
    getDeclarationOut({ registUid: props.registUid })
        .then((res) => {
          let key;
          for (key in res.data) {
            if (key in projectInfo) {
              projectInfo[key] = res.data[key];
            }
          }
          projectInfo.projectBackground = projectInfo!.projectBackground?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.applicationScenario = projectInfo!.applicationScenario?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.coreAdvantages = projectInfo!.coreAdvantages?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.fundamentalsDataElements = projectInfo!.fundamentalsDataElements?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.technicalArchitecture = projectInfo!.technicalArchitecture?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.dataGovernance = projectInfo!.dataGovernance?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.mechanismInnovation = projectInfo!.mechanismInnovation?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.securityManagement = projectInfo!.securityManagement?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.applicationEffectiveness = projectInfo!.applicationEffectiveness?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.businessModel = projectInfo!.businessModel?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')

          // todo 先写死
          if (props.registUid === "1951177067077316609") {
            projectInfo.technicalArchitecture = projectInfo.technicalArchitecture!.replace(
                /href="[^"]*"/,
                `href="/admin/doc/15533111001/水泵采用CADCAE进行水泵水力模型优化项目技术路线.docx"`
            );
            projectInfo.fundamentalsDataElements = projectInfo.fundamentalsDataElements!.replace(
                /href="[^"]*"/,
                `href="/admin/doc/15533111001/水泵采用CADCAE进行水泵水力模型优化项目数据要素基础.docx"`
            );
          }

          if (props.registUid === "1951175125903093762") {
            projectInfo.technicalArchitecture = projectInfo.technicalArchitecture!.replace(
                /href="[^"]*"/,
                `href="/admin/doc/18833133086/基于SCADA的智能化腻子粉生产工艺控制系统集成技术路线.docx"`
            )
            projectInfo.dataGovernance = projectInfo.dataGovernance!.replace(
                /href="[^"]*"/,
                `href="/admin/doc/18833133086/数据治理情况.docx"`
            )
            projectInfo.mechanismInnovation = projectInfo.mechanismInnovation!.replace(
                /href="[^"]*"/,
                `href="/admin/doc/18833133086/机制创新与模式创新.docx"`
            )
          }
        })
        .catch(() => {
          visible.value = false;
          Message.error("获取失败");
        })
        .finally(() => {
          visible.value = true;
          setTimeout(() => {
            loading.value = false;
          }, 300);
        });
  } else {
    getDeclaration({ registUid: props.registUid })
        .then((res) => {
          let key;
          for (key in res.data) {
            if (key in projectInfo) {
              projectInfo[key] = res.data[key];
            }
          }
          projectInfo.projectBackground = projectInfo!.projectBackground?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.applicationScenario = projectInfo!.applicationScenario?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.coreAdvantages = projectInfo!.coreAdvantages?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.fundamentalsDataElements = projectInfo!.fundamentalsDataElements?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.technicalArchitecture = projectInfo!.technicalArchitecture?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.dataGovernance = projectInfo!.dataGovernance?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.mechanismInnovation = projectInfo!.mechanismInnovation?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.securityManagement = projectInfo!.securityManagement?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.applicationEffectiveness = projectInfo!.applicationEffectiveness?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          projectInfo.businessModel = projectInfo!.businessModel?.replace('http://www.hbzwfw.gov.cn', 'http://10.254.90.198:30083')
          if (props.registUid === "1951177067077316609") {
            projectInfo.technicalArchitecture = projectInfo.technicalArchitecture!.replace(
                /href="[^"]*"/,
                `href="/admin/doc/15533111001/水泵采用CADCAE进行水泵水力模型优化项目技术路线.docx"`
            );
            projectInfo.fundamentalsDataElements = projectInfo.fundamentalsDataElements!.replace(
                /href="[^"]*"/,
                `href="/admin/doc/15533111001/水泵采用CADCAE进行水泵水力模型优化项目数据要素基础.docx"`
            );
          }

          if (props.registUid === "1951175125903093762") {
            projectInfo.technicalArchitecture = projectInfo.technicalArchitecture!.replace(
                /href="[^"]*"/,
                `href="/admin/doc/18833133086/基于SCADA的智能化腻子粉生产工艺控制系统集成技术路线.docx"`
            )
            projectInfo.dataGovernance = projectInfo.dataGovernance!.replace(
                /href="[^"]*"/,
                `href="/admin/doc/18833133086/数据治理情况.docx"`
            )
            projectInfo.mechanismInnovation = projectInfo.mechanismInnovation!.replace(
                /href="[^"]*"/,
                `href="/admin/doc/18833133086/机制创新与模式创新.docx"`
            )
          }
        })
        .catch(() => {
          visible.value = false;
          Message.error("获取失败");
        })
        .finally(() => {
          visible.value = true;
          setTimeout(() => {
            loading.value = false;
          }, 300);
        });
  }

};
const formRef = ref<FormInstance>();

const loading = ref(false);

const drawer = ref<{
  showDialog: () => void;
  hideDialog: () => void;
}>();

const options = reactive({
  title: "",
  type: 0,
});

const handleClose = () => {
  visible.value = false;
};

const show = () => {
  loading.value = true;
  options.type = 0;
  formRef.value?.clearValidate();
  let key;
  for (key in projectInfo) {
    projectInfo[key] = "";
  }
  getDeclarationList();
};

const visible = ref(false);

defineExpose({
  show,
});
</script>

<template>
  <div v-if="props.show === 1 && visible">
<!--    <a href=""></a>-->
    <div
      v-if="loading"
      style="height: 700px;"
    >
      <div class="loading-overlay">
        <div class="loading-spinner"></div>
        <!-- <div class="loading-text">加载中...</div> -->
      </div>
    </div>

    <a-descriptions
      v-else
      title=""
      bordered
      :column="1"
      style="height: 700px;overflow: auto;"
    >
      <a-descriptions-item label="项目背景">
        <p
          v-html="projectInfo.projectBackground"
          style="white-space: pre-wrap;"
          v-if="projectInfo.projectBackground"
        ></p>
        <p
          v-else
          style="color: #666;"
        >暂无</p>
      </a-descriptions-item>
      <a-descriptions-item label="应用场景">
        <p
          v-html="projectInfo.applicationScenario"
          style="white-space: pre-wrap;"
          v-if="projectInfo.applicationScenario"
        ></p>
        <p
          v-else
          style="color: #666;"
        >暂无</p>
      </a-descriptions-item>

      <a-descriptions-item label="核心优势">
        <p
          v-html="projectInfo.coreAdvantages"
          v-if="projectInfo.coreAdvantages"
          style="white-space: pre-wrap;"
        ></p>
        <p
          v-else
          style="color: #666;"
        >暂无</p>
      </a-descriptions-item>
      <a-descriptions-item label="数据要素基础">
        <p
          v-html="projectInfo.fundamentalsDataElements"
          v-if="projectInfo.fundamentalsDataElements"
          style="white-space: pre-wrap;"
        ></p>
        <p
          v-else
          style="color: #666;"
        >暂无</p>
      </a-descriptions-item>
      <a-descriptions-item label="技术路线">
        <p
          v-html="projectInfo.technicalArchitecture"
          v-if="projectInfo.technicalArchitecture"
          style="white-space: pre-wrap;"
        ></p>
        <p
          v-else
          style="color: #666;"
        >暂无</p>
      </a-descriptions-item>
      <a-descriptions-item label="数据治理情况">
        <p
          v-html="projectInfo.dataGovernance"
          v-if="projectInfo.dataGovernance"
          style="white-space: pre-wrap;"
        ></p>
        <p
          v-else
          style="color: #666;"
        >暂无</p>
      </a-descriptions-item>
      <a-descriptions-item label="机制创新与模式创新">
        <p
          v-html="projectInfo.mechanismInnovation"
          v-if="projectInfo.mechanismInnovation"
          style="white-space: pre-wrap;"
        ></p>
        <p
          v-else
          style="color: #666;"
        >暂无</p>
      </a-descriptions-item>
      <a-descriptions-item label="安全保障">
        <p
          v-html="projectInfo.securityManagement"
          v-if="projectInfo.securityManagement"
          style="white-space: pre-wrap;"
        ></p>
        <p
          v-else
          style="color: #666;"
        >暂无</p>
      </a-descriptions-item>
      <a-descriptions-item label="应用成效">
        <p
          v-html="projectInfo.applicationEffectiveness"
          v-if="projectInfo.applicationEffectiveness"
          style="white-space: pre-wrap;"
        ></p>
        <p
          v-else
          style="color: #666;"
        >暂无</p>
      </a-descriptions-item>
      <a-descriptions-item label="商业模式描述">
        <p
          v-html="projectInfo.businessModel"
          style="white-space: pre-wrap;"
          v-if="projectInfo.businessModel"
        ></p>
        <p
          v-else
          style="color: #666;"
        >暂无</p>
      </a-descriptions-item>
    </a-descriptions>
  </div>

  <a-modal
    v-else
    v-model:visible="visible"
    ref="drawer"
    title="项目申报书"
    width="70%"
  >
    <div style="height: 600px;overflow: auto;">
      <a-descriptions
        title=""
        bordered
        :column="1"
      >
        <a-descriptions-item label="项目背景">
          <p
            v-html="projectInfo.projectBackground"
            style="white-space: pre-wrap;"
            v-if="projectInfo.projectBackground"
          ></p>
          <p
            v-else
            style="color: #666;"
          >暂无</p>
        </a-descriptions-item>
        <a-descriptions-item label="应用场景">
          <p
            v-html="projectInfo.applicationScenario"
            style="white-space: pre-wrap;"
            v-if="projectInfo.applicationScenario"
          ></p>
          <p
            v-else
            style="color: #666;"
          >暂无</p>
        </a-descriptions-item>

        <a-descriptions-item label="核心优势">
          <p
            v-html="projectInfo.coreAdvantages"
            v-if="projectInfo.coreAdvantages"
            style="white-space: pre-wrap;"
          ></p>
          <p
            v-else
            style="color: #666;"
          >暂无</p>
        </a-descriptions-item>
        <a-descriptions-item label="数据要素基础">
          <p
            v-html="projectInfo.fundamentalsDataElements"
            v-if="projectInfo.fundamentalsDataElements"
            style="white-space: pre-wrap;"
          ></p>
          <p
            v-else
            style="color: #666;"
          >暂无</p>
        </a-descriptions-item>
        <a-descriptions-item label="技术路线">
          <p
            v-html="projectInfo.technicalArchitecture"
            v-if="projectInfo.technicalArchitecture"
            style="white-space: pre-wrap;"
          ></p>
          <p
            v-else
            style="color: #666;"
          >暂无</p>
        </a-descriptions-item>
        <a-descriptions-item label="数据治理情况">
          <p
            v-html="projectInfo.dataGovernance"
            v-if="projectInfo.dataGovernance"
            style="white-space: pre-wrap;"
          ></p>
          <p
            v-else
            style="color: #666;"
          >暂无</p>
        </a-descriptions-item>
        <a-descriptions-item label="机制创新与模式创新">
          <p
            v-html="projectInfo.mechanismInnovation"
            v-if="projectInfo.mechanismInnovation"
            style="white-space: pre-wrap;"
          ></p>
          <p
            v-else
            style="color: #666;"
          >暂无</p>
        </a-descriptions-item>
        <a-descriptions-item label="安全保障">
          <p
            v-html="projectInfo.securityManagement"
            v-if="projectInfo.securityManagement"
            style="white-space: pre-wrap;"
          ></p>
          <p
            v-else
            style="color: #666;"
          >暂无</p>
        </a-descriptions-item>
        <a-descriptions-item label="应用成效">
          <p
            v-html="projectInfo.applicationEffectiveness"
            v-if="projectInfo.applicationEffectiveness"
            style="white-space: pre-wrap;"
          ></p>
          <p
            v-else
            style="color: #666;"
          >暂无</p>
        </a-descriptions-item>
        <a-descriptions-item label="商业模式描述">
          <p
            v-html="projectInfo.businessModel"
            style="white-space: pre-wrap;"
            v-if="projectInfo.businessModel"
          ></p>
          <p
            v-else
            style="color: #666;"
          >暂无</p>
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <template #footer>
      <a-button @click="handleClose">
        关闭
      </a-button>
    </template>
  </a-modal>

</template>

<style scoped lang="scss">
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.loading-text {
  font-size: 13px;
  color: #333;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
